﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>文本插入组件：Careter</title>

    <style type="text/css">
        body
        {
            padding:0;
            margin:0;
        	font-size:12px;
        	background-color:#fff;
        }
        fieldset
        {
            margin:12px;
            border:solid 1px #999;
        }
        fieldset legend
        {
        	font-weight:bold;
        	padding:4px;
        	margin:4px 6px 4px 12px;
            cursor:pointer;
            border:solid 1px #aaa;
            background-color:#eee;
        }
        div.fieldConten
        {
            margin:12px;
        }
    </style>

<script src="http://open-ui.googlecode.com/svn/trunk/jquery-1.3.2.min.js" type="text/javascript" charset='utf-8'></script>
<link href="Careter.css" rel="stylesheet" type="text/css" />
<script src="Careter.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(function () {
            $('fieldset legend').click(function () {
                $(this).parent().children('div.fieldConten').toggle();
            });

            //////////////////////////////////////////////////////////


            // 数据源
            var dataSource = new Array();
            for (var i = 0; i < 20; i++) {
                var n = i > 9 ? i : "0" + i;
                dataSource.push('文本<b>NO.' + n + '</b>');
            }

            // 最简单的调用
            $('#Text1').careter({
                data: dataSource // 数据源（字符串数组；必填！默认为null）
            });

            // 一次性对多个文本框使用插件
            $('.Text').careter({
                data: dataSource,  // 数据源（字符串数组；必填！默认为null）
                showAnim: 'show'
            });

            // 设置其他属性
            $('#Text2').careter({
                data: dataSource,   // 数据源（字符串数组；必填！默认为null）
                horizontal: true,   // 是否水平布局（默认为false）
                title: '请选择...',  // 标题（默认为组件名称）
                showAnim: 'fadeIn',  // 显示方式（'default'（默认） \ 'show' \ 'slideDown' \ 'fadeIn'）
                insertHtml: true     //是否允许插入html（默认为false）
            });

            // 使用回调函数处理修正插入的文本
            $('#Text3').careter({
                data: dataSource, // 数据源（字符串数组；必填！默认为null）
                onInsert: function (val) {
                    return val + '；';
                }
            });

            $('#Text4_1').careter({ // 默认情况
                data: dataSource
            });
            $('#Text4_2').careter({
                data: dataSource,
                closeMode: {
                    onBlur: false       // 失去焦点时候不关闭（默认值为true）
                },
                showAnim: 'show'
            });
            $('#Text4_3').careter({
                data: dataSource,
                closeMode: {
                    onSelect: true,     // 选中插入项时关闭（默认值为false）
                    showClose: false    // 不显示关闭按钮（默认值为true）
                },
                showAnim: 'slideDown'
            });
            $('#Text4_4').careter({
                data: dataSource,
                closeMode: {
                    onBlur: false,       // 失去焦点时候不关闭（默认值为true）
                    onSelect: true,      // 选中插入项时关闭（默认值为false）
                    showClose: false      // 不显示关闭按钮（默认值为true）
                },
                showAnim: 'fadeIn'
            });

        });
    </script>
</head>

<body>
    <h1>文本插入组件</h1>
    <fieldset>
        <legend> 插件说明 </legend>
        <div class="fieldConten">
            <pre>
    ----------------------------[说明]------------------------------
        用于点击文本框选择插入文本的插件...不知道这样描述准确不- -！

    ----------------------------[使用]------------------------------
        使用jquery选择器选中要使用该插件的对象，调用插件
            如：  $("#tableId").careter(options);
            或者：$("input").careter(options);

    --------------------------[配置参数]----------------------------
        data:       供选择的文本数组（必填！默认为null）,
        horizontal: 是否水平布局（默认为false）,
        title:      标题（默认为组件名称）,
        showAnim:   显示方式（'default'（默认） \ 'show' \ 'slideDown' \ 'fadeIn'）
        insertHtml: 是否允许插入html（默认为false）
        closeMode:  关闭方式（json参数）
                        |--- onBlur:    失去焦点时关闭（默认true）
                        |--- onSelect:  点击插入项时关闭（默认false）
                        |--- showClose: 显示关闭按钮（默认true）

    --------------------------[回调函数]----------------------------
        onInsert(val)：插入文本前调用的方法
                val = 插入的文本内容
                返回 = 插入文本或者td的jquery对象)）
            </pre>
        </div>
    </fieldset>
        
    <fieldset>
        <legend> 最简单的调用 </legend>
        <div class="fieldConten">
            <div>
                请点击文本框：<input id="Text1" type="text" value="Careter" style="width:320px;" />
            </div>
            <pre>
$("#txt1").careter({
    data: dataSource // 数据源（字符串数组；必填！默认为null）
});
            </pre>
        </div>
    </fieldset>

    <fieldset>
        <legend> 一次性对多个文本框使用插件 </legend>
        <div class="fieldConten">
            <div>
                请点击文本框：
                <br /><br />
                <input type="text" value="Careter" class="Text" />
                <input type="text" value="Careter" class="Text" />
                <br /><br />
                <textarea class="Text" cols="50" rows="3"></textarea>
            </div>
            <pre>
// 一次性对多个文本框使用插件
$('.Text').careter({
    data: dataSource,  // 数据源（字符串数组；必填！默认为null）
    showAnim: 'show'
});
            </pre>
        </div>
    </fieldset>

    <fieldset>
        <legend> 设置其他属性 </legend>
        <div class="fieldConten">
            <div>
                请点击文本框：<input id="Text2" type="text" value="Careter" style="width:320px;" />
            </div>
            <pre>
// 设置其他属性
$('#Text2').careter({
    data: dataSource,   // 数据源（字符串数组；必填！默认为null）
    horizontal: true,   // 是否水平布局（默认为false）
    title: '请选择...',  // 标题（默认为组件名称）
    showAnim: 'fadeIn',   // 显示方式（'default'（默认） \ 'show' \ 'slideDown' \ 'fadeIn'）
    insertHtml:true     //是否允许插入html（默认为false）
});
            </pre>
        </div>
    </fieldset>

    <fieldset>
        <legend> 使用回调函数处理修正插入的文本 </legend>
        <div class="fieldConten">
            <div>
                请点击文本框：<input id="Text3" type="text" value="Careter" style="width:320px;" />
            </div>
            <pre>
// 使用回调函数处理修正插入的文本
$('#Text3').careter({
    data: dataSource, // 数据源（字符串数组；必填！默认为null）
    onInsert: function (val) {
        return val + ';';
    }
});
            </pre>
        </div>
    </fieldset>

    <fieldset>
        <legend> 设置关闭方式 </legend>
        <div class="fieldConten">
            <div>
                请点击文本框，顺便按Tab键（或者Shift + Tab）：<br />
                Text4_1: <input type="text" id="Text4_1" value="默认情况" />&nbsp;&nbsp;
                Text4_2: <input type="text" id="Text4_2" value="失去焦点时候不关闭" />&nbsp;&nbsp;
                Text4_3: <input type="text" id="Text4_3" value="选中插入项时关闭" />&nbsp;&nbsp;
                Text4_4: <input type="text" id="Text4_4" value="失去焦点时候不关闭，选中插入项时关闭" style="width:320px;" />&nbsp;&nbsp;
            </div>
            <pre>
$('#Text4_1').careter({ // 默认情况
    data: dataSource
});
$('#Text4_2').careter({
    data: dataSource,
    closeMode: {
        onBlur: false       // 失去焦点时候不关闭（默认值为true）
    },
    showAnim:'show'
});
$('#Text4_3').careter({
    data: dataSource,
    closeMode: {
        onSelect: true,     // 选中插入项时关闭（默认值为false）
        showClose: false    // 不显示关闭按钮（默认值为true）
    },
    showAnim:'slideDown'
});
$('#Text4_4').careter({
    data: dataSource,
    closeMode: {
        onBlur: false,       // 失去焦点时候不关闭（默认值为true）
        onSelect: true,      // 选中插入项时关闭（默认值为false）
        showClose:false      // 不显示关闭按钮（默认值为true）
    },
    showAnim:'fadeIn'
});
            </pre>
        </div>
    </fieldset>



    <!-- 生成的html如下：-->
    <!--<div class="Jquery-Careter border-radius">
        <div class="Jquery-Careter-Main border-radius">
            <div class="Jquery-Careter-Title border-radius-top">
                <span class="titleText">标题</span>
                <span class="btnClose border-radius">关闭</span>
            </div>
            <div class="Jquery-Careter-Content border-radius-bottom">
                <ul>
                    <li class="border-radius">插入项文本-NO.1</li>
                    <li class="border-radius">插入项文本-NO.2</li>
                    <li class="border-radius">插入项文本-NO.3</li>
                    <li class="border-radius">插入项文本-NO.4</li>
                    <li class="border-radius">插入项文本-NO.5</li>
                    <li class="border-radius">插入项文本-NO.6</li>
                    <li class="border-radius">插入项文本-NO.7</li>
                </ul>
            </div>
        </div>
    </div>-->
<!--Footer START-->
<script src="http://open-ui.googlecode.com/svn/trunk/function.js" type="text/javascript" charset='utf-8'></script>
<script type="text/javascript">
getFooter();
</script>
<!--Footer END-->

</body>
</html>
